<template>
	<view class="page-center">
		<!-- <nav-bar title="" :showLeftIcon="true" :leftSlot="true">
			<template slot="leftSlot">
				<view class="header-box">
					<view class="tab-list">
						<view v-for="(item, index) in tabsList" :key="index"
							:class="['tab-item', tabActive == item.value ? 'active-item':'']" 
							@tap="checkType(item)">
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</template>
		</nav-bar> -->
		<view id="selectArea">
			<view class="header-box">
				<view class="tab-list">
					<view v-for="(item, index) in tabsList" :key="index"
						:class="['tab-item', tabActive == item.value ? 'active-item':'']" 
						@tap="checkType(item)">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="select-area row-center">
				<view class="select-area-item" @click="openAdress(1)">
					<view class="row-center">
						<text>始发地：</text>
						<text  class="area-name ellipsis-text">{{startCityItemValue[0].cityName || '全部城市'}}</text>
					</view>
					<u-icon v-if="startCityItemValue.length <= 0" name="arrow-down-fill"></u-icon>
					<u-icon v-else name="close-circle-fill" size="30rpx" @click="clearFilx(1)"></u-icon>
				</view>
				<view class="select-area-item" @click="openAdress(2)">
					<view class="row-center">
						<text>目的地：</text>
						<text class="area-name ellipsis-text">{{endCityItemValue[0].cityName || '全部城市'}}</text>
					</view>
					<u-icon v-if="endCityItemValue.length <= 0" name="arrow-down-fill"></u-icon>
					<u-icon v-else name="close-circle-fill" size="30rpx" @click="clearFilx(2)"></u-icon>
				</view>
				<!-- <view class="btn" @click="queryList">确认</view>
				<view class="btn reset" @click="reset">重置</view> -->
			</view>
		</view>
		


		<scroll-view scroll-y="true" :style="{ 'height': scrollHeight + 'px'}"  @scrolltolower="loadMore">
				<!-- 在找车 -->
				<view class="tranport-list" v-if="tabActive == 1">
					<view class="tranport-item" v-for="item in findCarList" @click="toDetail(item)">
						<view class="base-info">
							<view class="base-info-left row-column-center">
								<!-- 头像缺 -->
								<!-- <view class="header-img"></view> -->
								<!-- <u-icon name="account-fill" size="30rpx" color="#999"></u-icon> -->
								<image class="header-img" src="@/static/images/headerDefault.png" mode="widthFix"></image>
								<text>{{item.nickName || 'XX用户'}}</text>
							</view>
							<view class="release-item">
								{{item.createTime|forrmatterTime}}发布
							</view>
						</view>
						<view class="to-place">
							<view>
								<text>{{fomatterAdressName(item.startProvince)}} {{fomatterAdressName(item.startCity)}}</text>
								<image src="@/static/images/public/to-hear.png" mode=""></image>
								<text>{{fomatterAdressName(item.endProvince)}} {{fomatterAdressName(item.endCity)}}</text>
							</view>
							<view class="place-number">
								<text v-if="item.newestQuote">
									{{item.newestQuote}}
									<text style="font-size: 24rpx;">元</text>
								</text> 
								<text v-else>暂无报价</text>
							</view>
							
						</view>
						<view class="car-info">
							<text>{{forrmatterEnmu(Enmu.vehicleType, item.vehicleType)}}</text>
							<text style="margin: 0 10rpx;">/</text>
							<text>{{item.quantity}}台</text>
							<text style="margin: 0 10rpx;">/</text>
							<text>{{forrmatterEnmu(Enmu.carStatusList, item.vehicleStatus)}}</text>
						</view>
						
						<view class="quotation">
							<view class="quotation-left">
								<view class="check-time">
									<text>托运日期：{{item.shippingDate}}</text>
									<text class="dimension" v-if="item.shippingDate && isTomorrow(item.shippingDate)">(明天)</text>
								</view>
								<view class="quotation-Bidding">
									当前 {{item.quoteCount || 0}} 次出价 {{item.callCount || 0}} 次联系
								</view>
							</view>
							<view class="quotation-right">
								<view class="quotation-btn iphone"  @click.stop="callPhone(item,1)">
									电话联系
								</view>
								<view class="quotation-btn quoteNow" @click.stop="toQuotation(item)">
									立即报价
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 车找货 -->
				<view class="tranport-list" v-if="tabActive == 2">
					<view class="tranport-item" v-for="item in findGoodList"  @click="toGoodsDetail(item)">
						<view class="to-place">
							<view class="">
								<text>{{fomatterAdressName(item.startProvince)}} {{fomatterAdressName(item.startCity)}}</text>
								<image src="@/static/images/public/to-hear.png" mode=""></image>
								<text>{{fomatterAdressName(item.endProvince)}} {{fomatterAdressName(item.endCity)}}</text>
							</view>
							<view class="place-number">
								<text>{{item.expectedMinPrice}}-{{item.expectedMaxPrice}}</text>
								<text style="font-size: 24rpx;">元</text>
							</view>
						</view>
						
						<view class="car-info">
							<text v-if="item.hasTransitCities == 0">途径点：无</text>
							<text v-else>途径点：{{item.transitCities}}</text>
						</view>
						<view class="check-time flex-sp">
							<text>预计起止时间：</text>
							<text class="dimension-fill">{{item.expectedStartTime}}—{{item.expectedArrivalTime}}</text>
						</view>
						<view class="quotation">
							<view class="quotation-left">
								<view class="quotation-carrier row-column-center">
									 <!-- logo 缺-->
									<!-- <view class="carrier-logo" v-if="item.isApproved == 1">
										<uni-icons type="smallcircle-filled" color="#1777FF" size="20"></uni-icons>
									</view>
									<view class="carrier-logo" v-else>
										<u-icon name="account-fill" size="30rpx" color="#999"></u-icon>
									</view> -->
									<text style="line-height: 1;">{{item.companyName || item.userName || '默认'}} </text>
									<view class="auth-iden" v-if="item.isApproved == 1">
										<!-- 切图缺 -->
										<uni-icons type="person" color="#1777FF" size="18"></uni-icons>
										企业认证
									</view>
									<view class="auth-iden-yu">
										{{forrmatterEnmu(Enmu.carType, item.vehicleType)}}
									</view>
								</view>
								<view class="quotation-release">
									{{item.createTime}}发布
								</view>
							</view>
							<view class="quotation-right" @click.stop="callPhone(item,2)">
								<view class="quotation-btn quoteNow">
									电话联系
								</view>
							</view>
						</view>
					</view>
				</view>
				<view>
					<view class="loading" v-if="!isAllData">
					  正在加载，请稍候
					  <uni-icons type="spinner-cycle" size="16" style="margin-left: 4px;"></uni-icons>
					</view>
					<view class="all-data" v-else>已加载全部数据~</view>
				</view>
		</scroll-view>
		
		<!-- 发布需求 -->
		<view class="release-need" @click="toRelease" v-if="type == 2">
			<image src="../static/images/public/release-req.png" mode=""></image>
		</view>

		<adress-picker
			:isShow="selectCityShow" 
			:isInit="isInit" 
			@cancel="selectCityShow=false" 
			@getCityValues="selectCityConfirm"></adress-picker>
		
		<!-- <u-popup :show="isCityPopupShow" :round="12" mode="right" @close="isSelectShow = false">
			<view class="City-Popup">
				<view class="city-select-content">
					<view class="select-area-item" @click="openAdress(1)">
						<view>
							<text>出发：</text>
							<text style="font-size: 26rpx;color: #333">{{startCityItemValue[1].cityName}}</text>
						</view>
						<u-icon name="arrow-down-fill"></u-icon>
					</view>
					<view class="select-area-item" @click="openAdress(2)">
						<view>
							<text>到达：</text>
							<text style="font-size: 26rpx;color: #333">{{endCityItemValue[1].cityName}}</text>
						</view>
						<u-icon name="arrow-down-fill"></u-icon>
					</view>
				</view>
				<view class="btn">
					<view class="btn-qu btn-cencal" @click="isCityPopupShow = false">
						取消
					</view>
					<view class="btn-qu">
						确认
					</view>
				</view>
			</view>
		</u-popup> -->
		<!-- <liu-choose-address ref="scroll" @change='chooseSuccess' :key="isAddress"></liu-choose-address> -->
		
		<u-popup :show="isCityPopupShow" :safeAreaInsetBottom="false" @close="isCityPopupShow = false" mode="right">
			<you-index-adress @select="selectCity"></you-index-adress>
		</u-popup>
		
	</view>
</template>

<script>
	import AdressPicker from '@/components/you-from/adress-picker.vue'
	import Transport from '@/api/transport.js'
	import userCenter from '@/api/userCenter.js'
	import {forrmatterEnmu, isTomorrow} from '@/utils/index.js'
	import Enmu from '@/utils/enmu.js'
	import { getToken, checkToken } from '@/utils/auth'
	import {fomatterAdressName} from '@/utils/common.js'
	import Common from '@/api/common.js'
	import { showConfirm } from '@/utils/common'
	import settleIn from '@/api/settleIn.js'
	export default {
		name: 'Transport',
		components: {AdressPicker},
		data() {
			return {
				Enmu,
				tabsList: [{
						name: "在找车",
						value: '1'
					},
					{
						name: "在找货",
						value: '2'
					},
				],
				tabActive: '1',
				loadingHeight: '',
				scrollHeight: '',
				isRequestSuccess: false,
				isAllData: false,
				findCarList: [],
				pageInfo: {
					pageSize: 10,
					pageNum: 1,
					total: 0
				},
				findGoodList: [],
				selectCityShow: false,
				isInit: false,
				startCityItemValue: [],
				endCityItemValue: [],
				userName: '',
				isCityPopupShow: false,
				isCarrier: 0,
				type:1
			}
		},
		async onLoad(e) {
			if(e.type) {
				this.tabActive = e.type;
			}
			this.$scope.clearFilx = this.clearFilx.bind(this)
		},
		filters: {
			forrmatterTime(time) {
				if(!time || time == '') return "";
				return time.split(" ")[0]
			}
		},
		onShow() {
			
			this.getType()
			this.userName = uni.getStorageSync('userName');
			this.isCarrier = uni.getStorageSync('isCarrier') || 0;
			this.findCarList = [];
			this.findGoodList = [];
			this.pageInfo = {
				pageSize: 10,
				pageNum: 1,
				total: 0
			};
			if(this.tabActive == 1) {
				this.getDemandListFn();
			} else {
				this.getGoodDemandListFn();
			}
			Common.getInfo().then(res => {
				let {companyInfo, crmNetworkInfo, user} = res;
				this.isCarrier = '0';
				if(companyInfo && companyInfo.isApproved) {
					if(companyInfo.isApproved == 1) {
						this.isCarrier = 'c-1';
					} else if(companyInfo.isApproved == 2) {
						this.isCarrier = 'c-2';
					} else{
						this.isCarrier = '0';
					}
				}
				console.log(crmNetworkInfo)
				if(crmNetworkInfo && crmNetworkInfo.isApproved) {
					if(crmNetworkInfo.isApproved == 1) {
						this.isCarrier = 'n-1';
					} else if(crmNetworkInfo.isApproved == 2) {
						this.isCarrier = 'n-2';
					} else {
						this.isCarrier = '0';
					}
				}
				uni.setStorageSync('userId', user.userId);
			})
		},
		mounted() {
			
			const systemInfo = uni.getSystemInfoSync();
			this.scrollHeight = systemInfo.windowHeight;
			console.log(systemInfo)
			const query = uni.createSelectorQuery().in(this);
			query.select('#selectArea').boundingClientRect(data => {
				if (data) {
					this.$nextTick(() => {
						this.scrollHeight = this.scrollHeight - data.height;
					})
				}
			}).exec();
			 
		},
		methods: {
			forrmatterEnmu,
			isTomorrow,
			fomatterAdressName,
			clearFilx(e) {
				// event.stopPropagation();
				console.log("clear");
				if(e == 1) {
					this.startCityItemValue = [];
				} else {
					this.endCityItemValue = [];
				}
				this.isCityPopupShow = false;
				this.pageInfo = {
					pageSize: 10,
					pageNum: 1,
					total: 0
				};
				if(this.tabActive == 1) {
					this.findCarList = [];
					this.getDemandListFn();
				} else {
					this.findGoodList = [];
					this.getGoodDemandListFn();
				}
			},
			
			
			async getType(){
				let res = await settleIn.flag();
				if (res.code == 200) {
					this.type= res.data
				}
			},
			selectCity(data) {
				console.log(data);
				this.isCityPopupShow = false;
				if (this.selectCityFlag == 1) {
					this.startCityItemValue = [data];
				} else {
					this.endCityItemValue = [data];
				}
				this.pageInfo = {
					pageSize: 10,
					pageNum: 1,
					total: 0
				};
				if(this.tabActive == 1) {
					this.findCarList = [];
					this.getDemandListFn();
				} else {
					this.findGoodList = [];
					this.getGoodDemandListFn();
				}
			},
			changeRegionString() {
				this.type = 1
				this.$refs.scroll.open()
			},
			async getDemandListFn() {
				this.isAllData = false;
				let res = await Transport.getDemandList({
					pageSize: this.pageInfo.pageSize,
					pageNum: this.pageInfo.pageNum,
					// startProvince: this.startCityItemValue.length > 0 && this.startCityItemValue[0].value || '',
					startCity: this.startCityItemValue.length > 0 && this.startCityItemValue[0].id || '',
					endCity: this.endCityItemValue.length > 0 && this.endCityItemValue[0].id || '',
					// endProvince: this.endCityItemValue.length > 0 && this.endCityItemValue[0].value || ''
					status: '上架'
				});
				this.findCarList.push(...res.rows);
				this.$set(this.pageInfo, "total", res.total);
				this.$set(this.pageInfo, "total", res.total);
				let {pageNum, pageSize, total} = this.pageInfo;
				if(pageNum  >= total / pageSize) {
					this.isAllData = true;
					return;
				}
			},
			async getGoodDemandListFn() {
				this.isAllData = false;
				let res = await Transport.getGoodDemandList({
					pageSize: this.pageInfo.pageSize,
					pageNum: this.pageInfo.pageNum,
					// startProvince: this.startCityItemValue.length > 0 && this.startCityItemValue[0].value || '',
					startCity: this.startCityItemValue.length > 0 && this.startCityItemValue[0].id || '',
					endCity: this.endCityItemValue.length > 0 && this.endCityItemValue[0].id || '',
					// endProvince: this.endCityItemValue.length > 0 && this.endCityItemValue[0].value || ''
					status: '上架'
				});
				this.findGoodList.push(...res.rows);
				this.$set(this.pageInfo, "total", res.total);
				let {pageNum, pageSize, total} = this.pageInfo;
				if(pageNum  >= total / pageSize) {
					this.isAllData = true;
					return;
				}
			},
			checkType(item) {
				this.tabActive = item.value;
				this.pageInfo = {
					pageSize: 10,
					pageNum: 1,
					total: 0
				};
				this.startCityItemValue = [];
				this.endCityItemValue = [];
				if(item.value == 1) {
					this.findCarList = [];
					this.getDemandListFn();
				} else {
					this.findGoodList = [];
					this.getGoodDemandListFn();
				}
				
			},
			onRefresh() {
				uni.stopPullDownRefresh();
			},
			loadMore() {
				console.log("加载更多")
				let {pageNum, pageSize, total} = this.pageInfo;
				if(pageNum  >= total / pageSize) {
					this.isAllData = true;
					return;
				}
				this.$set(this.pageInfo, 'pageNum', pageNum+1);
				if(this.tabActive == 1) {
					this.getDemandListFn();
				} else {
					this.getGoodDemandListFn();
				}
			},
			callPhone(item, callType) {
				if(!checkToken()) return;
				if(callType == 1) {
					if(this.isCarrier == 0) {
						showConfirm('请先入驻承运商或者网点').then(res => {
						  if (res.confirm) {
							  uni.switchTab({
							  	url: '/pages/settleIn'
							  })
						  }
						})
						return;
					} else if(this.isCarrier == 'c-1' || this.isCarrier == 'n-1') {
						let msg = this.isCarrier == 'c-1' ? '承运商' : '网点';
						uni.showToast({
							title: "您已申请"+msg+"入驻,请耐心等待审核",
							icon: 'none'
						});
						return;
					}
					
				}
				
				uni.makePhoneCall({
					phoneNumber: item.phoneNumber,
					success: () => {
					  console.log('拨打电话成功');
					  let obj = {};
					  if(callType == 1) {
						  obj.demandId = item.id;
					  } else if(callType == 2){
						  obj.goodDemandId = item.id;
					  }
					  userCenter.setLogCount({
						callType,
						...obj,
						phoneNumber: this.userName,
					  }).then(res => {})
					},
					fail: (err) => {
					}
				});
			},
			toRelease() {
				let url = "/subPages/transport/release/index";
				if(checkToken()) {
					uni.navigateTo({
						url
					})
				}
			},
			toDetail(item) {
				uni.navigateTo({
					url: "/subPages/transport/detail/findCar?id=" + item.id
				})
			},
			toGoodsDetail(item){
				uni.navigateTo({
					url: "/subPages/transport/detail/findGoods?id=" + item.id
				})
			},
			toQuotation(item) {
				if(!checkToken()) return;
				if(this.isCarrier == 0) {
					showConfirm('请先入驻承运商或者网点').then(res => {
					  if (res.confirm) {
						  uni.switchTab({
						  	url: '/pages/settleIn'
						  })
					  }
					})
					return;
				} else if(this.isCarrier == 'c-1' || this.isCarrier == 'n-1') {
					let msg = this.isCarrier == 'c-1' ? '承运商' : '网点';
					uni.showToast({
						title: "您已申请"+msg+"入驻,请耐心等待审核",
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: "/subPages/transport/detail/quotation?id=" + item.id
				})
			},
			openAdress(flag) {
				// this.selectCityShow = true;
				this.selectCityFlag = flag;
				// this.isInit = true;
				this.isCityPopupShow = true;
				// this.$refs.scroll.open();
			},
			chooseSuccess(e) {
				console.log(e)
				if (this.selectCityFlag == 1) {
					this.startCityItemValue = e.value;
				} else {
					this.endCityItemValue = e.value;
				}
			},
			selectCityConfirm(values) {
				console.log(values)
				if(this.selectCityFlag == 1) {
					this.startCityItemValue = values;
				} else if(this.selectCityFlag == 2){
					this.endCityItemValue = values;
				}
				this.selectCityShow = false;
			},
			queryList() {
				this.pageInfo = {
					pageSize: 10,
					pageNum: 1,
					total: 0
				};
				if(this.tabActive == 1) {
					this.findCarList = [];
					this.getDemandListFn();
				} else {
					this.findGoodList = [];
					this.getGoodDemandListFn();
				}
			},
			reset() {
				this.startCityItemValue = [];
				this.endCityItemValue = [];
				this.pageInfo = {
					pageSize: 10,
					pageNum: 1,
					total: 0
				};
				if(this.tabActive == 1) {
					this.findCarList = [];
					this.getDemandListFn();
				} else {
					this.findGoodList = [];
					this.getGoodDemandListFn();
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.loading,
	  .all-data {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    color: #999;
		padding: 15rpx 0;
	  }
	.flex-sp {
		display: flex;
		justify-content: space-between;
	}
	.page-center {
		background: #fff;
		width: 100%;
		height: 100%;
	}
	
	.City-Popup {
		width: 80vw;
		height: 100vh;
		background: #fff;
		.city-select-content {
			height: 80vh;
			width: 100%;
			display: flex;
			padding: 50rpx 20rpx;
		}
		.btn {
			display: flex;
			justify-content: space-around;
			padding: 20rpx;
			.btn-qu {
				height: 80rpx;
				width: 200rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				text-align: center;
				background: #1777FF;
				color: #fff;
				border-radius: 12rpx;
			}
			.btn-cencal {
				background: #999;
			}
		}
		
	}
	
	.header-box {
		display: flex;
		// margin-left: 100rpx;
		margin-bottom: 20rpx;
		.tab-list {
			display: flex;
			align-items: center;
			.tab-item {
				color: #000000;
				font-size: 30rpx;
				line-height: 1;
				opacity: 0.8;
				margin-left: 40rpx;
				// padding: 20rpx 0;
			}
		
			.active-item {
				display: flex;
				flex-direction: column;
				font-size: 34rpx;
		
				&::after {
					content: "";
					display: inline-block;
					height: 8rpx;
					width: 68rpx;
					background: linear-gradient(90deg, #2f85ff1a 0%, #2F85FF 100%);
					border-radius: 6rpx;
				}
			}
		}
	}
	
	.select-area {
		padding: 8rpx 28rpx;
		display: flex;
		
	}
	.select-area-item {
		// width: 300rpx;
		width: 50%;
		flex: 1;
		height: 64rpx;
		background: #f6f6f6;
		font-size: 26rpx;
		color: #666;
		margin-right: 20rpx;
		border-radius: 8rpx;
		line-height: 64rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&:last-of-type {
			margin-right: 0;
		}
		.area-name {
			display: inline-block;
			font-size: 26rpx;
			color: #333;
			max-width: 160rpx;
		}
	}
	.btn {
		font-size: 24rpx;
		color: #fff;
		background: #1777FF;
		padding: 8rpx;
		height: 40rpx;
		box-sizing: border-box;
		line-height: 1;
		border-radius: 4rpx;
		border: 2rpx solid #1777FF;
	}
	.reset {
		margin-left: 10rpx;
		color: #1a1a1a;
		background: #fff;
		color: #1777FF;
	}


	.tranport-list {
		padding: 0 28rpx;
		line-height: 1;
		.tranport-item {
			margin-top: 60rpx;
			&:first-of-type {
				margin-top: 30rpx;
			}
			.base-info {
				display: flex;
				font-size: 24rpx;
				color: #333;
				justify-content: space-between;
				align-items: center;
				line-height: 1;

				.base-info-left {
					display: flex;
					line-height: 1;
				}

				.header-img {
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx;
				}

				.release-item {
					color: #999;
				}
			}

			.to-place {
				font-size: 30rpx;
				color: #1A1A1A;
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				image {
					width: 35rpx;
					height: 8rpx;
					margin: 0 12rpx;
					vertical-align: middle;
				}
			}
			
			.place-number {
				font-size: 44rpx;
				color: #1777FF;
			}

			.car-info {
				color: #ff7512;
				font-size: 26rpx;
				margin-top: 20rpx;
				line-height: 1;
			}

			.check-time {
				color: #9F9F9F;
				font-size: 24rpx;
				margin-top: 18rpx;
				line-height: 1;

				.dimension {
					color: #1777ff;
					margin: 10rpx;
				}
				.dimension-fill {
					color: #1C1C1C;
					font-size: 26rpx;
				}
			}

			.quotation {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				margin-top: 10rpx;

				.quotation-price {
					color: #1777FF;
				}

				.quotation-Bidding {
					color: #4D4D4D;
					margin-top: 20rpx;
				}

				.quotation-btn {
					width: 172rpx;
					height: 64rpx;
					border-radius: 8rpx;
					font-size: 28rpx;
					text-align: center;
					line-height: 64rpx;
				}
				
				.quotation-carrier {
					display: flex;
					font-size: 24rpx;
					color: #1A1A1A;
					margin-top: 10rpx;
					.carrier-logo {
						width: 36rpx;
						height: 36rpx;
						margin-right: 12rpx;
					}
					.auth-iden {
						font-size: 20rpx;
						padding: 6rpx 12rpx;
						background: #D1E5FF;
						color: #1777FF;
						border-radius: 4rpx;
						margin-left: 12rpx;
					}
					.auth-iden-yu {
						color: #ff7512;
						font-size: 20rpx;
						padding: 6rpx 10rpx;
						background: #FFE3D1;
						border-radius: 4rpx;
						margin-left: 12rpx;
					}
				}
				.quotation-release {
					font-size: 24rpx;
					color: #9F9F9F;
					margin-top: 10rpx;
				}

				.quotation-right {
					display: flex;
					align-self: flex-end;
				}

				.quoteNow {
					background: #1777FF;
					color: #fff;
					margin-left: 20rpx;
				}

				.iphone {
					color: #1777FF;
					border: 2rpx solid #1777FF;
				}
			}
		}
	}
	.release-need {
		width: 248rpx;
		height: 88rpx;
		position: fixed;
		right: 0;
		bottom: 150rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	
	
	
</style>